<template>
    <div v-show="visible">
        <div class="grid_cont">
            <div style="display:flex;">
                <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
                <div style="margin-left:10px;font-size: 16px;line-height: 16px;">学习情况统计</div>
            </div>
            <div
                style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:16px;">
            </div>
            <div class="cont">
                <!-- 搜索工作栏 -->
                <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="cont_top" label-width="50px">
                    <el-form-item style="margin-right:12px;">
                        <el-button link type="primary" @click="exportbtn" class="btnhover"
                            style="width: 90px;height: 30px;background-color: rgba(218,111,40,1);color: rgba(255,255,255,1);">导出</el-button>
                    </el-form-item>
                    <el-form-item label="组织" prop="organizationName" style="margin-right:17px;">
                        <el-tree-select v-model="queryParams.organizationName" check-strictly placeholder=""
                            :data="optionOrganization" default-expand-all style="width: 200px;" @change="handleQuery" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="userName" style="margin-right:17px;">
                        <el-input v-model="queryParams.userName" style="width: 200px;" placeholder="  "
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="学习情况" prop="status" label-width="74px" style="margin-right:17px;">
                        <el-select v-model="queryParams.status" @change="handleQuery" placeholder="" placement="bottom"
                            style="width: 200px;">
                            <el-option v-for="item in optionStatus" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-right:0;">
                        <el-button @click="handleQuery" class="btn btnsearch">查询</el-button>
                        <el-button @click="resetQuery" class="btn btnreset">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 列表 -->
                <el-table v-loading="loading" element-loading-text="Loading..." :data="list"
                    style="margin-bottom: 20px;" :header-cell-style="{ background: '#F0F0F0' }">
                    <el-table-column align="center" label="姓名" prop="userName" show-overflow-tooltip min-width="200px">
                        <template #default="scope">
                            <div class="namecont">
                                {{ scope.row.userName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="组织" prop="organizationName" show-overflow-tooltip min-width="200px">
                        <template #default="scope">
                            <div class="namecont">
                                {{ scope.row.organizationName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="学习情况" prop="status" min-width="200px">
                        <template #default="{ row }">
                            {{ statusTypeObj[row.status] }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否需答题" prop="isQuizRequired" min-width="160px">
                        <template #default="{ row }">
                            {{ RequiredTypeObj[row.isQuizRequired] }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否通过" prop="isCorrect" min-width="160px">
                        <template #default="{ row }">
                            <div v-if="row.isCorrect != null" style="color:#CC352F;">
                                {{ CorrectTypeObj[row.isCorrect] }}
                            </div>
                            <div v-else>
                                {{ CorrectTypeObj[row.isCorrect] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="答题情况" prop="result" min-width="240px" show-overflow-tooltip>
                        <template #default="{ row }">
                            <div class="namecont">
                                {{ row.result === "" ? '--' :
                                    `共${row.result.split('-')[0]}题|答对${row.result.split('-')[1]}道|答错${row.result.split('-')[2]}道`
                                }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination style="font-size: 14px;" v-model:current-page="queryParams.pageNo"
                :hide-on-single-page="value" v-model:page-size="queryParams.pageSize" :page-sizes="pageSizes"
                layout="total,sizes,prev, pager, next,jumper" :total="total" @size-change="selectchange"
                @current-change="handleCurrentChange" />
        </div>
        <div class="grid_cont2">
            <el-button class="grid_btn" @click="gridCancel"
                style="background-color: rgb(255, 255, 255);border: 1px solid rgb(187, 187, 187);color: rgb(142, 142, 142);">返回</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as getlearnApi from '@/api/spb/partyMemberLearning/index'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import download from '@/utils/download'

const visible = ref(false)
const props = defineProps({
    learnShow: {
        type: Boolean,
        default: false
    },
    editData: {
        type: Object
    }
})
const { push } = useRouter() // 路由
const loading = ref(true) // 列表加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const value = ref(true)
const pageSizes = [10, 20, 50, 100]
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    userName: '',
    organizationName: '',
    status: '',
    materialId: ''
})
const queryFormRef = ref() // 搜索的表单
const optionOrganization = ref([])
const optionStatus = [
    {
        value: 0,
        label: '未完成',
    },
    {
        value: 1,
        label: '已完成',
    },
]
const statusTypeObj = {
    true: '已完成',
    false: '未完成'
}
const RequiredTypeObj = {
    true: '是',
    false: '否'
}
const CorrectTypeObj = {
    true: '通过',
    null: '--',
    false: '未通过'
}
//处理树形数据加value和label
function traverse(nodes) {
    nodes.forEach(node => {
        if (node.id) {
            node.label = node.name;
            node.value = node.id;
        }
        if (node.children && Array.isArray(node.children)) {
            traverse(node.children);
        }
    })
}

// 获取党组织列表
const getAreaOrganization = async () => {
    optionOrganization.value = []
    const data = {
        pageNo: 1,
        pageSize: 9999,
    }
    getlearnApi.getOrganizationPage(data).then(async (res) => {
        let cloneData = JSON.parse(JSON.stringify(res)) // 对源数据深度克隆
        cloneData = cloneData.filter((father) => {
            // 循环所有项，并添加children属性
            let branchArr = cloneData.filter((child) => father.id == child.parentId) // 返回每一项的子级数组
            branchArr.length > 0 ? (father.children = branchArr) : '' //给父级添加一个children属性，并赋值
            return father.parentId == 0 //返回第一层
        })
        traverse(cloneData)
        optionOrganization.value = cloneData
    })
}

/** 条数变化 */
const selectchange = (e) => {
    queryParams.pageSize = e
    queryParams.pageNo = 1
    getList()
}
/** 页码变化 */
const handleCurrentChange = (e) => {
    queryParams.pageNo = e
    getList()
}

/** 查询任务列表 */
const getList = async () => {
    getlearnApi.countStudymaterials(queryParams).then((res) => {
        let data = reactive(res.list)
        list.value = data;
        total.value = res.total
        if (list.value.length === 0) {
            value.value = true
        } else {
            value.value = false
        }
        loading.value = false
    }).catch(error => {
        loading.value = false
    })
}
const emit = defineEmits(['getlearnShow', 'geteditData'])
watch(() => props.learnShow, (val) => {
    visible.value = val
}, { immediate: true })
watch(() => props.editData, (val) => {
    if (val) {
        queryParams.materialId = val.id
        if (props.learnShow == true) {
            getList()
            getAreaOrganization()
        }
    }
}, { immediate: true })
/** 返回按钮操作 */
const gridCancel = () => {
    visible.value = false
    emit('getlearnShow', visible.value)
    emit('geteditData', props.editData.pageNo)
}

/** 导出 */
const exportbtn = () => {
    ElMessageBox.confirm(
        '是否确认批量导出学习情况?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // const data = await getlearnApi.exportStudymaterials(queryParams)
            const data = await getlearnApi.exportStudymaterials()
            download.excel(data, '学习情况.xls')
            ElMessage({
                type: 'info',
                message: '正在请求资源请稍后',
                duration: 500,
            });
            ElMessage.success('下载成功！')
        })
        .catch(() => {
            ElMessage.info('已取消下载')
        })
}
/** 查询按钮操作 */
const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

/** 初始化 **/
onMounted(() => {
    // getList()
})
</script>
<style scoped>
.grid_cont {
    min-height: 600px;
    background: #fff;
    margin-bottom: 20px;
}

.grid_cont2 {
    width: 100%;
    background: #fff;
    height: 65px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
    width: 80px;
    height: 30px;
}

.grid_btn:hover {
    opacity: 0.8;
}

.cont {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    min-height: 510px;
    position: relative;
}

.cont_top {
    text-align: left;
    margin: 4px 0;
}

::v-deep .el-table .cell {
    display: flex;
    justify-content: center;
}

::v-deep .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #CC352F;
}

.btn {
    width: 80px;
    height: 30px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.btnreset {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(187, 187, 187, 1);
    color: rgba(142, 142, 142, 1);
}

.btnsearch {
    background-color: #CC352F;
    color: rgba(255, 255, 255, 1);
    border: 1px solid #CC352F;
}

.btn:hover {
    opacity: 0.8;
}

.btnhover:hover {
    opacity: 0.8;
}

.el-pagination {
    justify-content: center;
}

.namecont {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

::v-deep .el-form-item__label{
    padding: 0 17px 0 0;
}
</style>